<template>
  <div class="center-map-container">
    <div ref="mapRef" class="map-content"></div>
    
    <div class="map-legend">
      <div class="legend-item">
        <span class="legend-dot capacity-station"></span>
        <span class="legend-text">运力站点</span>
      </div>
    </div>
    
    <div v-if="selectedStation" class="info-panel">
      <h4>{{ selectedStation.name }}</h4>
      <p>类型: {{ selectedStation.type }}</p>
      <p>状态: {{ selectedStation.status }}</p>
      <p>车辆数: {{ selectedStation.capacity }}</p>
      <p>使用率: {{ selectedStation.usage }}%</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { qingyunMapData } from '@/utils/qingyun'

interface Props {
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  title: '运力站点分布图'
})

const mapRef = ref<HTMLElement>()
let mapInstance: echarts.ECharts | null = null
const currentView = ref('overview')
const selectedStation = ref<any>(null)

// 模拟运力站点数据
const stationData = [
  {
    name: '庆云运力站1号',
    value: [117.385, 37.775, 85],
    type: '运力站',
    status: '正常',
    capacity: '25辆',
    usage: 85,
    symbolSize: 15,
    itemStyle: { color: '#ff4444' }
  },
  {
    name: '庆云配送中心A区',
    value: [117.395, 37.785, 92],
    type: '配送中心',
    status: '正常',
    capacity: '40辆',
    usage: 92,
    symbolSize: 12,
    itemStyle: { color: '#ff6666' }
  },
  {
    name: '庆云运力站2号',
    value: [117.375, 37.765, 78],
    type: '运力站',
    status: '维护中',
    capacity: '18辆',
    usage: 78,
    symbolSize: 15,
    itemStyle: { color: '#ff8888' }
  },
  {
    name: '庆云货运中心B区',
    value: [117.405, 37.795, 67],
    type: '货运中心',
    status: '正常',
    capacity: '35辆',
    usage: 67,
    symbolSize: 12,
    itemStyle: { color: '#ffaaaa' }
  },
  {
    name: '庆云维修点1号',
    value: [117.365, 37.755, 45],
    type: '维修点',
    status: '正常',
    capacity: '12辆',
    usage: 45,
    symbolSize: 10,
    itemStyle: { color: '#ffcccc' }
  }
]

const initMap = () => {
  if (!mapRef.value) return
  
  mapInstance = echarts.init(mapRef.value)
  
  // 注册地图
  echarts.registerMap('qingyun', qingyunMapData)
  
  updateMapOption()
}

const updateMapOption = () => {
  if (!mapInstance) return
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        if (params.seriesType === 'map') {
          return `${params.name}<br/>区域: 庆云县`
        } else {
          const data = params.data
          return `
            <div style="padding: 8px;">
              <div style="font-weight: bold; color: #ff4444;">${data.name}</div>
              <div>类型: ${data.type}</div>
              <div>状态: ${data.status}</div>
              <div>车辆数: ${data.capacity}</div>
              <div>使用率: ${data.usage}%</div>
            </div>
          `
        }
      },
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#ff4444',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'qingyun',
      roam: true,
      zoom: 1,
      center: [117.385, 37.795],
      itemStyle: {
        areaColor: 'rgba(0, 212, 255, 0.1)',
        borderColor: '#00d4ff',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: 'rgba(0, 212, 255, 0.2)'
        }
      }
    },
    series: [
      {
        name: '庆云县',
        type: 'map',
        map: 'qingyun',
        roam: true,
        geoIndex: 0,
        data: []
      },
      {
        name: '运力设施',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: stationData,
        symbol: 'pin',
        symbolSize: (val: any) => val[2] / 5 + 10,
        label: {
          show: false,
          formatter: '{b}',
          position: 'right',
          color: '#fff',
          fontSize: 12
        },
        emphasis: {
          label: {
            show: true
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(255, 68, 68, 0.8)'
          }
        }
      },
      {
        name: '使用率波纹',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: stationData.filter(item => item.usage > 80),
        symbol: 'circle',
        symbolSize: 8,
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
          scale: 3,
          period: 2
        },
        itemStyle: {
          color: '#ff4444',
          shadowBlur: 10,
          shadowColor: '#ff4444'
        }
      }
    ]
  }
  
  mapInstance.setOption(option)
  
  // 添加点击事件
  mapInstance.off('click')
  mapInstance.on('click', (params: any) => {
    if (params.seriesType === 'scatter' || params.seriesType === 'effectScatter') {
      selectedStation.value = params.data
    }
  })
}

const resizeMap = () => {
  if (mapInstance) {
    mapInstance.resize()
  }
}

onMounted(() => {
  setTimeout(() => {
    initMap()
  }, 100)
  window.addEventListener('resize', resizeMap)
})

onUnmounted(() => {
  if (mapInstance) {
    mapInstance.dispose()
  }
  window.removeEventListener('resize', resizeMap)
})
</script>

<style scoped lang="less">
.center-map-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  // background: linear-gradient(135deg, rgba(255, 68, 68, 0.05) 0%, rgba(255, 102, 102, 0.05) 100%);
  border-radius: 8px;
  overflow: hidden;
}

.map-content {
  flex: 1;
  width: 100%;
  min-height: 400px;
}

.map-legend {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 68, 68, 0.3);
  
  .legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
      
      &.capacity-station {
        background: #ff4444;
        box-shadow: 0 0 8px #ff4444;
      }
    }
    
    .legend-text {
      color: #8c9eff;
      font-size: 12px;
    }
  }
}

.info-panel {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.8);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 68, 68, 0.3);
  min-width: 200px;
  
  h4 {
    color: #ff4444;
    margin: 0 0 10px 0;
    font-size: 14px;
  }
  
  p {
    color: #8c9eff;
    margin: 5px 0;
    font-size: 12px;
  }
}
</style>